const Vue = require('vue');
const app = require('express')();
const VueRender = require('vue-server-renderer');
// 创建一个vue模板对象
const renderer = VueRender.createRenderer();

app.get('*', (req, res) => {
  // 引入vue对的目的，不是为了用他的双向绑定，而是为了用他的模板
  // 这个和之前用的ejs模板，没有什么区别
  const vue_app = new Vue({
    data: {
      url: req.url
    },
    template: `<div>打造前程:{{url}}</div>`
  })
  renderer.renderToString(vue_app, (err, html) => {
    if(err) {
      res.status(500).end('Server is wrong!');
      return
    }
    res.end(`<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>打造前程</title>
      </head>
      <body>
        ${html}
      </body>
    </html>`)
  })
})

app.listen(3000, () => {
  console.log('ok')
})